import React from "react";
class Todo extends React.Component {
    constructor() {
        super()
        this.state = {
            inputvalue:"",
            todos: [
                { id: 1, name: "111" },
                { id: 2, name: "222" },
                { id: 3, name: "333" },
                { id: 4, name: "444" },

            ]
        }
    }
    onchange=(event)=>{
    //   console.log(event);
    this.setState({
        inputvalue:event.target.value
    })
      
    }

    additem=()=>{
        this.setState({
            todos:[...this.state.todos,{id:this.state.todos.length+1,name:this.state.inputvalue}],
            inputvalue:""
        })
    }
    render() {
        return (
            <>
            <input type="text" value={this.state.inputvalue} onChange={this.onchange} />
            <div><button onClick={this.additem.bind(this)}>add</button></div>
             <ul>
               {
                this.state.todos.map((item,index)=>{
                    return <li key={item.id}>{item.name}</li>
                })
               }
                
                </ul> 

            </>
        )
    }



}
export default Todo
